<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../index.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        canvas {
            margin: 50px auto 0;
            display: block;
            background: yellow;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="400" height="400">
    此浏览器不支持canvas
</canvas>
</body>
</html>
<script>
    const ctx = document.getElementById('canvas')
    const gl = ctx.getContext('webgl')

    const VERTEX_SHADER_SORUCE = `
    attribute vec4 aPosition;
    varying vec4 vPosition;
    void main(){
      gl_Position = aPosition;
      vPosition = aPosition;
      gl_PointSize = 10.0;
    }
  `;
    const FRAGEMNT_SHADER_SOURCE = `
    precision lowp float;
    uniform float radius;
    uniform float w;
    uniform float h;
    varying vec4 vPosition;
    void setColor(float x,float y,vec2 target){
        float d = distance(vec2(target),vec2(x,y));
        if(d>radius){
            discard;
        }else{
            gl_FragColor = vec4(1.0,0.0,0.0,1.0);
        }
    }
    void main(){

      float x = vPosition.x;
      float y = vPosition.y;
      // 左上
      vec2 topLeft = vec2(-w + radius,h-radius);
      // 右上
      vec2 topRight = vec2(w - radius,h-radius);
      // 左下
      vec2 bottomLeft = vec2(-w + radius,-h+radius);
      // 右下
      vec2 bottomRight = vec2(w - radius,-h+radius);

      if(x < topLeft.x && y > topLeft.y){
        setColor(x,y,topLeft);
      }else if(x > topRight.x && y > topRight.y){
        setColor(x,y,topRight);
      }else if(x < bottomLeft.x && y < bottomLeft.y){
        setColor(x,y,bottomLeft);
      }else if(x > bottomRight.x && y < bottomRight.y){
        setColor(x,y,bottomRight);
      }else{
        gl_FragColor = vec4(1.0,0.0,0.0,1.0);
      }
    }
  `;
    // 封装后
    const program = initShader(gl, VERTEX_SHADER_SORUCE, FRAGEMNT_SHADER_SOURCE)
    const aPosition = gl.getAttribLocation(program, 'aPosition')
    const radius = gl.getUniformLocation(program,'radius')
    const w = gl.getUniformLocation(program,'w')
    const h = gl.getUniformLocation(program,'h')
    const size = 0.5
    // 顶点数据
    const points = new Float32Array([
        -size, -size,
        size, -size,
        -size, size,
        size, size,
    ])
    const buffer = gl.createBuffer();

    gl.bindBuffer(gl.ARRAY_BUFFER, buffer)

    gl.bufferData(gl.ARRAY_BUFFER,points,gl.STATIC_DRAW)

    gl.vertexAttribPointer(aPosition,2,gl.FLOAT,false,0,0)
    // 激活aPosition
    gl.enableVertexAttribArray(aPosition)

    gl.uniform1f(radius,0.1)
    gl.uniform1f(w,size)
    gl.uniform1f(h,size)

    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

</script>
